
@mixin action-lnk-block($w: 3) {
  .edg-t, .edg-r, .edg-b, .edg-l {
    position: absolute;
    transition: all .3s ease-in;
  }
  .edg-t {
    width: 0px;
    height: $w;
    top: 0;
    left: 0;
    background: #000;
  }
  .edg-r {
    width: $w;
    height: 0px;
    right: 0;
    background: #000;
  }
  .edg-b {
    width: 0px;
    height: $w;
    bottom: 0;
    right: 0;
    background: #000;
  }
  .edg-l {
    width: $w;
    height: 0px;
    left: 0;
    bottom: 0;
    background: #000;
  }
  &:hover,&.active {
    .edg-t {
      width: 100%;
    }
    .edg-r {
      height: 100%;
    }
    .edg-b {
      width: 100%;
    }
    .edg-l {
      height: 100%;
    }
  }
}


#lookbook{
  .gallery-nav{
    float:left;
    text-align: center;

    .band{
      width: 80%;
      margin-top:30%;
    }
    .act-lnk-1{
      display: inline-block;
      border: 1px solid #000;
      color:#aaa;
      font-size: 18px;
      padding: 2px 8px;
      text-decoration: none;
      width: 140px;
      margin:60px 8px;
      transition:all .5s;

      &:hover,&.active{
        background:#000;
        color:#fff;
      }
    }

    .act-lnk-2{
      display: inline-block;
      position: relative;
      font-size: 14px;
      width: 70px;
      height:25px;
      line-height: 25px;
      color: #000;

      @include action-lnk-block(1px)
    }
  }
  .gallery-looper{
    overflow: hidden;
    position: relative;
  }
  .gallery{
    .pod{
      float:left;
      display: inline-block;
      position: relative;

      .write-border{
        position: absolute;
        left: 20px;
        top: 20px;
        border:1px solid #fff;
      }

      .edg-t,.edg-r,.edg-b,.edg-l{
        position: absolute;
        transition: all .3s ease-in;
      }

      .edg-t{
        width:0px;
        height:20px;
        top:0;
        background:#fff;
        
      }
      .edg-r{
        width:20px;
        height:0px;
        right:0;
        background:#fff;
        
      }
      .edg-b{
        width:0px;
        height:20px;
        bottom:0;
        right:0;
        background:#fff;
        
      }
      .edg-l{
        width:20px;
        height:0px;
        left:0;
        bottom:0;
        background:#fff;
        
      }

      &:hover{
        .edg-t{
          width:100%;
        }
        .edg-r{
          height: 100%;
        }
        .edg-b{
          width: 100%;
        }
        .edg-l{
          height: 100%;
        }
      }
    }
  }
}